<template>
	<view class="">
	<view class="content">
		<image src="../../static/images/homes_01.png" mode="" class="bgImages"></image>
		<view class="content_top"   :style="{paddingTop: statusBarHeight + 'px'}">
			<view class="mintop">
				<view class="small" @click="openmessage">
					<image src="../../static/images/home_06.png" mode="" class="imgleft"></image>
					<view class="tap" v-if="text1>0">{{text1|fliterNum}}</view>
				</view>
				
				<view class="">首页</view>
				<image src="../../static/images/home_03.png" mode=""  class="imgright">
			</view>
			<view class="minName">
				<view class="min-left flex align-center">
					<image class="mr20" src="../../static/images/home_10.png" mode=""></image>
					<view class="">
						<view class="fwight f18">{{userInfor.nickName}}</view>
						<view class="jiaose">角色：{{filterName(roles)}}</view>
					</view>
				</view>
				<view  class="min-right flex align-center" @click="toAtten" v-if="$checkPermission(['xc_personnel'])">
					<image src="../../static/images/home_13.png" mode="" class="mr20"></image>
					<view class="fwight">打卡</view>
				</view>
			</view>
			<view class="minTop_type boxShow">
				<view class="flex align-center c_45 lineM"><view class="lines"></view>网格案件</view>
				<view class="flex minline flex-around">
					<view v-if="$checkPermission(['hc_personnel','hs_personnel','cz_personnel','bdjgjxy','supervisor'])" @click="toCase">
						<image src="../../static/images/home_25.png" class="size1" mode=""></image>
						<view>待办案件</view>
					</view>
					<view  v-if="$checkPermission(['hc_personnel','hs_personnel','xc_personnel','cz_personnel','bdjgjxy','supervisor'])" @click="caseHeadle(1)">
						<image src="../../static/images/home_18.png" class="size1" mode=""></image>
						<view>我的上报</view>
					</view>
					<view v-if="$checkPermission(['hc_personnel','hs_personnel','cz_personnel','bdjgjxy','supervisor'])" @click="caseHeadle(2)">
						<image src="../../static/images/home_20.png" class="size1" mode=""></image>
						<view>已办案件</view>
					</view>
					<view v-if="$checkPermission(['bdjgjxy','supervisor'])"   @click="caseHeadle(3)">
						<image src="../../static/images/home_22.png" class="size1" mode=""></image>
						<view>督办案件</view>
					</view>
				</view>
			</view>
			<view class="minCenter flex flex-between">
				<view class="minbg">
					<image src="../../static/images/home_2.png" mode="" class="wigBg"></image>
				</view>
				<view class="worldall">
					<view class="flex c_45 fwight align-center"><view class="lines"></view>汇总统计</view>
				</view>
				<view class=""></view>
				<view class="min_right">
					<view class="searchBox">
						<view class="imgSm"><image src="../../static/images/search.png" mode=""></image></view>
						<view class="searchWc">综合查询</view>
					</view>
					<view class="searchBox">
						<view  class="imgSm1"><image src="../../static/images/tj.png" mode=""></image></view>
						<view  class="searchWc">案件统计</view>
					</view>
				</view>
			</view>
			<view class="mindown">
				<view class="flex c_45 fwight align-center"><view class="lines"></view>专项任务</view>
				<view class="downTwo">
					<view class="dowNin mr20">
						<image src="../../static/images/home_38.png" mode=""></image>
						<view class="">公厕巡查</view>
					</view>
					<view class="dowNin">
						<image src="../../static/images/home_35.png" mode="" class="img1"></image>
						<view class="">垃圾分类检查</view>
					</view>
				</view>
				<view class="flex c_45 fwight align-center mt20"><view class="lines"></view>信息采集</view>
				<view class="downTwo">
					<view class="dowNin mr20" @tap="collectSpecial">
						<image src="../../static/images/home_43.png" mode="" class="img3"></image>
						<view class="">专项采集</view>
					</view>
					<view class="dowNin">
						<image src="../../static/images/home_46.png" mode="" class="img4"></image>
						<view class="">门头牌匾采集</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<u-tabbar @change=changetab v-model="current" :list="$store.state.tabBarList" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import {getUserInfor,getMessageUnRead} from '../../util/api.js'
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				text1:0,
				current:0,
				userInfor:'',
				roles:[],
			}
		},
		computed: {
			...mapState(["newRules"]),
		},
		filters:{
			fliterNum(e){
				if(e>99){
					return "99+";
				}else{
					return e;
				}
			}
		},
		beforeCreate() {
			// uni.removeStorageSync('token');
			// uni.removeStorageSync('token_type');
			// uni.removeStorageSync('userInfor');
			// uni.removeStorageSync('roles');
			if(!uni.getStorageSync('userInfor')){
				uni.reLaunch({
					url:'../login'
				})
			}
		},
		onLoad() {
			this.userInfor = uni.getStorageSync('userInfor');
			this.roles = uni.getStorageSync('roles')
			this.getMessage()
			uni.$on('refush',()=>{
				this.getMessage()
			})
		},
		onUnload() {
			uni.$off('refush')
		},
		methods: {
			collectSpecial() {
				uni.navigateTo({
					url: '/pages/collect/index'
				})
			},
			openmessage(){
				uni.navigateTo({
					url:'../messageList/messageList'
				})
			},
			caseHeadle(e){
				uni.navigateTo({
					url:'../casesHandled/casesHandled?type='+e,
				})
			},
			toCase(){
				uni.navigateTo({
					url:'../pageList/pageList'
				})
			},
			getMessage(){
				var option = {
					userId:this.userInfor.userId
				}
				getMessageUnRead(option).then((res)=>{
					if(res.code == 200){
						this.text1 = res.data; 
					}
				}).catch((err)=>{
					console.log(err)
				})
			},
			filterName(data){
				let targetData = this.newRules&&this.newRules.length>0?
				this.newRules.filter(t=>data.indexOf(t.name)!=-1).map(s=>s.value).join(","):"";
				return targetData;
			},
			toAtten(){
				uni.navigateTo({
					url:'../attendance/attendance',
				})
			},
			changetab(index){
				let url =""
				switch(index){
					case 0:
					url="/pages/index/index"
					break;
					case 1:
					url="/pages/reporting/reporting"
					break;
					default:
					url="/pages/my/my"
					break;
				}
				index!=1?uni.switchTab({
					url:url
				}):uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.size1{
		width: 110rpx;
		height: 110rpx;
	}
.content{
	height: 100vh;
	background-color: #F6F7FB;
	.bgImages{
		width: 100%;
		height: 414rpx;
	}
	.content_top{
		position: absolute;
		top: 60rpx;
		color:#FFFFFF;
		width: 100%;
		.mintop{
			display: flex;
			padding: 0rpx 50rpx 0rpx 50rpx;
			justify-content: space-between;
			.small{
				position: relative;
				.tap{
					position: absolute;
					top: -10rpx;
					right: -28rpx;
					// padding: 2rpx 5rpx;
					width: 50rpx;
					height: 25rpx;
					line-height: 25rpx;
					background-color: #F0422C;
					border-radius: 10rpx;
					text-align: center;
					font-size: 8rpx;
				}
			}
			.imgleft{
				width: 50rpx;
				height: 40rpx;
			}
			.imgright{
				width: 38rpx;
				height: 38rpx;
			}
		}
		.minName{
			display: flex;
			padding: 0rpx 50rpx 0rpx 50rpx;
			justify-content: space-between;
			margin-top: 40rpx;
			.min-left{
				image{
					width: 128rpx;
					height: 128rpx;
				}
			}
			.min-right{
				background-color: #79B0F6;
				height: 60rpx;
				padding: 0rpx 24rpx 0rpx 24rpx;
				border-radius: 50rpx;
				margin-top: 30rpx;
				image{
					width: 38rpx;
					height: 35rpx;
				}
			}
		}
		.minTop_type{
			width: 700rpx;
			margin: 0  auto;
			margin-top: 50rpx;
			background-color: #FFFFFF;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding-bottom: 50rpx;
			.lineM{
				border-bottom: 1px  solid #ECF0F8;
				padding: 30rpx;
				margin-bottom: 30rpx;
				font-weight: bold;
			}
			.minline{
				width: 100%;
				color: #666666;
				font-size: 28rpx;
			}
		}
		.minCenter{
			border-top: 1px solid #E1E1E1;
			border-bottom: 1px solid #E1E1E1;
			padding: 20rpx 56rpx 20rpx 56rpx;
			margin-top: 60rpx;
			height: 230rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			.minbg{
				position: absolute;
				left: 0rpx;
				.wigBg{
					position: absolute;
					width: 420rpx;
					height: 248rpx;
					left: 0px;
					top: -60rpx;
					z-index: 0;
				}
			}
			.worldall{
				position: absolute;
				z-index: 1;
			}
			.min_right{
				.searchBox{
					background-color: #3CBDC3;
					color: #FFFFFF;
					padding-right: 30rpx;
					height: 60rpx;
					line-height: 60rpx;
					border: 1px solid #3CBDC3;
					display: flex;
					border-radius: 0rpx 20rpx 0rpx 20rpx;
					margin-top: 20rpx;
					.imgSm,.imgSm1{
						width: 60rpx;
						height: 57rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #FFFFFF;
						border-radius: 0rpx 20rpx 0rpx 20rpx;
						margin-right: 20rpx;
						image{
							width: 46rpx;
							height: 43rpx;
						}
					}
					.imgSm1{
						image{
							width: 46rpx;
							height: 43rpx
						}
					}
				}
			}
		}
		.mindown{
			margin-top: 46rpx;
			padding: 0rpx 56rpx 0rpx 56rpx;
			padding-bottom: 120rpx;
			background-color: #F6F7FB;
			.downTwo{
				display: flex;
				justify-content: space-around;
				.dowNin{
					display: flex;
					width: 330rpx;
					height: 144rpx;
					border-radius: 20rpx;
					border: 1px solid #D0D0D0;
					margin-top: 25rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #474747;
					background-color: #FFFFFF;
					image{
						width: 51rpx;
						height: 65rpx;
						margin-right: 30rpx;
					}
					.img1{
						width: 56rpx;
						height: 71rpx;
						margin-right: 10rpx;
					}
					.img3{
						width: 66rpx;
						height: 71rpx;
						margin-right: 10rpx;
					}
					.img4{
						width: 70rpx;
						height: 71rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
}
</style>
